import React, { useState } from 'react'

const GuideEditor = ({ guides, startSlot }) => {
  return (
    <div style={{ marginLeft: 20, width: 200 }}>
      <h3>引导线控制</h3>
      {startSlot ? (
        <p>
          已选择起点: {startSlot.id}
          <br />
          请点击目标车位
        </p>
      ) : (
        <p>点击车位选择起点</p>
      )}
      <div style={{ marginTop: 20 }}>
        <h4>现有引导线({guides.length})</h4>
        <ul style={{ paddingLeft: 20 }}>
          {guides.map((g) => (
            <li key={g.id}>
              {g.id.substring(5, 10)}: {g.start.x},{g.start.y} → {g.end.x},
              {g.end.y}
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}
export default GuideEditor
